<template>
  <div class="shop">
      <sonComponentsHeader title="店铺管理"/>
      <div class="shop-box">
        <div class="shop-input">
            <search @inputChange="ev => searchVal = ev" @handleToEnter="handleToSearch"/>
            <!-- <el-input placeholder="请选择分类" v-model="input" clearable height="38"> -->
            <el-select v-model="select" placeholder="请选择分类" clearable>
                <el-option :label="data.name" :value="data.id" v-for="data in Classification" :key="data.id"></el-option>
            </el-select>
            <!-- </el-input> -->
            <el-button type="primary" icon="el-icon-search" @click="handleToSearch">搜索</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="handleToAdd">添加</el-button>
        </div>
        <shopTable :listdata="listdata" @modifyFrom="handleEvent($event)" @refreshList="getListdata"/>
      </div>
      <fromPop v-if="isShowpop" @closePop="closePop" @addPopToFile="getListdata" :title="formTitle" :Classification="Classification" :fromData="fromData"/>
  </div>
</template>

<script>
import sonComponentsHeader from '@/components/sonComponentsHeader'
import shopTable from '@/components/shop/components/shopTable'
import fromPop from '@/components/shop/components/fromPop'

export default {
    name: 'shop',
    components: {
        sonComponentsHeader,
        shopTable,
        fromPop
    },
    data(){
      return {
        searchVal: '', // 搜索框的value
        listdata: [],// 列表数据
        select: '', // 分类数据
        Classification: '',// 分类种类
        isShowpop: false, // 是否显示弹窗
        formTitle: '', // 弹窗名称
        fromData: {}
      }
    },
    methods: {
        //获取分类
        getClassification(){
            this.$http({
                method: 'get',
                url: '/backend/api/cate?limit=100&status=1'
            }).then(res => {
                this.Classification = res.data.data
            })
        },

        //获取数据
        getListdata(){
            this.$http({
                method: 'get',
                url: 'backend/api/merchant?page=1&limit=100000',
            }).then(res => {
                this.listdata = res.data.data;
                console.log(this.listdata);
            })
        },

        //搜索数据
        handleToSearch(){
            this.$http({
                method: 'get',
                url: `/backend/api/merchant?page=1&limit=100000&keyword=${this.searchVal}&cate=${this.select}`,
            }).then(res => {
                this.listdata = res.data.data;
            })
        },

        // 子组件传递的数据
        handleEvent(ev){
            this.formTitle = ev.title;
            this.fromData = ev.list;
            this.isShowpop = true;
        },

        // 点击添加按钮
        handleToAdd(){
            this.formTitle = '添加店铺';
            this.isShowpop = true;
        },

        //关闭弹窗
        closePop(){
            this.fromData = {};//清空数据
            this.isShowpop = false;
        }
    },
    mounted(){
        this.getListdata();
        this.getClassification();
    }
}
</script>

<style lang="scss" scoped>
.shop{
  display: flex;
  flex-flow:column nowrap ;
  height: 100%;
  overflow: hidden;

  .shop-box{
    flex: 1;
    padding: 20px;
    height: calc(100% - 50px);
    overflow: auto;
  }

  .shop-input{
    display: flex;
    margin-bottom: 20px;
    .el-button{
      margin-left: 10px;
    }
    .el-select{
        margin-left: 10px;
        color: black;
        width: 200px;
        input{
            font-size: 13px;
        }
    }
  }
}
</style>